<template>
  <div class="toolbox-body">
    <nav class="menu">
      <div>
        <img
          crossorigin="anonymous"
          src="../assets/nav-img/gonjuxiang.svg"
          alt=""
        />
      </div>
      <ul>
        <!-- <li><a href="#contact">About</a></li> -->
        <li><a href="#about" @click="loadMap">下载</a></li>
        <li><a href="#careers" @click="remove">关闭</a></li>
        <li><a href="#services" @click="activeMeasure('area')">面积</a></li>
        <li><a href="#products" @click="activeMeasure('line')">测距</a></li>
      </ul>
    </nav>
  </div>
</template>

<script>
var map;
var draw;
var source;
var canvas;
/**
 * 当前绘制的要素（Currently drawn feature.）
 * @type {ol.Feature}
 */
var sketch;
/**
 * 帮助提示框对象（The help tooltip element.）
 * @type {Element}
 */
var helpTooltipElement;
/**
 *帮助提示框显示的信息（Overlay to show the help messages.）
 * @type {ol.Overlay}
 */
var helpTooltip;
/**
 * 测量工具提示框对象（The measure tooltip element. ）
 * @type {Element}
 */
var measureTooltipElement;
/**
 *测量工具中显示的测量值（Overlay to show the measurement.）
 * @type {ol.Overlay}
 */
var measureTooltip;
/**
 *  当用户正在绘制多边形时的提示信息文本
 * @type {string}
 */
var continuePolygonMsg = '双击结束面积测量';
var continueLineMsg = '双击结束距离测量';
export default {
  data() {
    return {};
  },
  mounted() {
    this.$nextTick(() => {
      map = this.$store.state.map;
      console.log('tool', map);
      //加载测量的绘制矢量层
      source = new ol.source.Vector(); //图层数据源
      var vector = new ol.layer.Vector({
        source: source,
        style: new ol.style.Style({
          //图层样式
          fill: new ol.style.Fill({
            color: 'rgba(255, 255, 255, 0.5)', //填充颜色
          }),
          stroke: new ol.style.Stroke({
            color: 'red', //边框颜色
            width: 2, // 边框宽度
          }),
          image: new ol.style.Circle({
            radius: 7,
            fill: new ol.style.Fill({
              color: 'red',
            }),
          }),
        }),
      });
      map.addLayer(vector);
    });
  },
  methods: {
    handleSelect(key, keyPath) {},
    // 激活测量
    activeMeasure(measuretype) {
      var that = this;

      map.removeInteraction(draw);
      /**
       * 鼠标移动事件处理函数
       * @param {ol.MapBrowserEvent} evt
       */
      var pointerMoveHandler = function (evt) {
        if (evt.dragging) {
          return;
        }
        /** @type {string} */
        var helpMsg = '点击开始绘制'; //当前默认提示信息
        //判断绘制几何类型设置相应的帮助提示信息
        if (sketch) {
          var geom = sketch.getGeometry();
          if (geom instanceof ol.geom.Polygon) {
            helpMsg = continuePolygonMsg; //绘制多边形时提示相应内容
          } else if (geom instanceof ol.geom.LineString) {
            helpMsg = continueLineMsg; //绘制线时提示相应内容
          }
        }
        helpTooltipElement.innerHTML = helpMsg; //将提示信息设置到对话框中显示
        helpTooltip.setPosition(evt.coordinate); //设置帮助提示框的位置
        // document.getElementsByName(helpTooltipElement).removeClass("hidden"); //移除帮助提示框的隐藏样式进行显示
      };
      map.on('pointermove', pointerMoveHandler); //地图容器绑定鼠标移动事件，动态显示帮助提示框内容
      // var geodesicCheckbox = document.getElementById("geodesic"); //测地学方式对象
      // global so we can remove it later
      var type = measuretype == 'area' ? 'Polygon' : 'LineString';
      draw = new ol.interaction.Draw({
        source: source, //测量绘制层数据源
        type: /** @type {ol.geom.GeometryType} */ (type), //几何图形类型
        style: new ol.style.Style({
          //绘制几何图形的样式
          fill: new ol.style.Fill({
            color: 'rgba(255, 255, 255, 0.2)',
          }),
          stroke: new ol.style.Stroke({
            color: '#4995f',
            lineDash: [10, 10],
            width: 2,
          }),
          image: new ol.style.Circle({
            radius: 5,
            stroke: new ol.style.Stroke({
              color: 'rgba(0, 0, 0, 0.7)',
            }),
            fill: new ol.style.Fill({
              color: 'rgba(255, 255, 255, 0.2)',
            }),
          }),
        }),
      });
      map.addInteraction(draw);
      createMeasureTooltip(); //创建测量工具提示框
      createHelpTooltip(); //创建帮助提示框

      var listener;
      //绑定交互绘制工具开始绘制的事件
      draw.on(
        'drawstart',
        function (evt) {
          // set sketch
          sketch = evt.feature; //绘制的要素

          /** @type {ol.Coordinate|undefined} */
          var tooltipCoord = evt.coordinate; // 绘制的坐标
          //绑定change事件，根据绘制几何类型得到测量长度值或面积值，并将其设置到测量工具提示框中显示
          listener = sketch.getGeometry().on('change', function (evt) {
            var geom = evt.target; //绘制几何要素
            var output;
            if (geom instanceof ol.geom.Polygon) {
              output = formatArea(/** @type {ol.geom.Polygon} */ (geom)); //面积值
              tooltipCoord = geom.getInteriorPoint().getCoordinates(); //坐标
            } else if (geom instanceof ol.geom.LineString) {
              output = formatLength(/** @type {ol.geom.LineString} */ (geom)); //长度值
              tooltipCoord = geom.getLastCoordinate(); //坐标
            }
            measureTooltipElement.innerHTML = output; //将测量值设置到测量工具提示框中显示
            measureTooltip.setPosition(tooltipCoord); //设置测量工具提示框的显示位置
          });
        },
        this
      );
      //绑定交互绘制工具结束绘制的事件
      draw.on(
        'drawend',
        function (evt) {
          measureTooltipElement.className = 'tooltip tooltip-static'; //设置测量提示框的样式
          measureTooltip.setOffset([0, -7]);
          // unset sketch
          sketch = null; //置空当前绘制的要素对象
          // unset tooltip so that a new one can be created
          measureTooltipElement = null; //置空测量工具提示框对象
          createMeasureTooltip(); //重新创建一个测试工具提示框显示结果
          ol.Observable.unByKey(listener);
        },
        this
      );

      /**
       *创建一个新的帮助提示框（tooltip）
       */
      function createHelpTooltip() {
        if (helpTooltipElement) {
          helpTooltipElement.parentNode.removeChild(helpTooltipElement);
        }
        helpTooltipElement = document.createElement('div');
        helpTooltipElement.className = 'tooltip hidden';
        helpTooltip = new ol.Overlay({
          element: helpTooltipElement,
          offset: [15, 0],
          positioning: 'center-left',
        });
        map.addOverlay(helpTooltip);
      }
      /**
       *创建一个新的测量工具提示框（tooltip）
       */
      function createMeasureTooltip() {
        if (measureTooltipElement) {
          measureTooltipElement.parentNode.removeChild(measureTooltipElement);
        }
        measureTooltipElement = document.createElement('div');
        measureTooltipElement.className = 'tooltip tooltip-measure';
        measureTooltip = new ol.Overlay({
          element: measureTooltipElement,
          offset: [0, -15],
          positioning: 'bottom-center',
        });
        map.addOverlay(measureTooltip);
      }
      /**
       * 测量长度输出
       * @param {ol.geom.LineString} line
       * @return {string}
       */
      var formatLength = function (line) {
        var length;
        var sphere = new ol.Sphere();
        //若使用测地学方法测量
        var sourceProj = map.getView().getProjection(); //地图数据源投影坐标系
        length = sphere.getLength(line, {
          projection: sourceProj,
          radius: 6378137,
        });
        // length = Math.round(line.getLength() * 100) / 100; //直接得到线的长度
        var output;
        if (length > 100) {
          output = Math.round((length / 1000) * 100) / 100 + ' ' + 'km'; //换算成KM单位
        } else {
          output = Math.round(length * 100) / 100 + ' ' + 'm'; //m为单位
        }
        return output; //返回线的长度
      };
      /**
       * 测量面积输出
       * @param {ol.geom.Polygon} polygon
       * @return {string}
       */
      var formatArea = function (polygon) {
        var area;
        var sphere = new ol.Sphere();

        //若使用测地学方法测量
        var sourceProj = map.getView().getProjection(); //地图数据源投影坐标系
        var geom = /** @type {ol.geom.Polygon} */ (
          polygon.clone().transform(sourceProj, 'EPSG:4326')
        ); //将多边形要素坐标系投影为EPSG:4326
        area = Math.abs(
          sphere.getArea(geom, { projection: sourceProj, radius: 6378137 })
        ); //获取面积

        // area = polygon.getArea(); //直接获取多边形的面积

        var output;
        if (area > 10000) {
          output =
            Math.round((area / 1000000) * 100) / 100 + ' ' + 'km<sup>2</sup>'; //换算成KM单位
        } else {
          output = Math.round(area * 100) / 100 + ' ' + 'm<sup>2</sup>'; //m为单位
        }
        return output; //返回多边形的面积
      };
    },
    remove() {
      console.log(draw);
      map.removeInteraction(draw);
      source.clear();
      var paras = document.getElementsByClassName(
        'ol-overlay-container ol-selectable'
      );
      for (var i = paras.length; i >= 0; i--) {
        //删除元素 元素.parentNode.removeChild(元素);
        if (paras[i] != null) paras[i].parentNode.removeChild(paras[i]);
      }
    },
    loadMap() {
      map.once('postcompose', function (event) {
        canvas = event.context.canvas;
        canvas.toBlob(function (blob) {
          saveAs(blob, 'map.png');
        });
      });
      map.renderSync();
    },
  },
};
</script>
<style>
.toolbox-body {
  width: 100px;
  height: 100px;

  position: absolute;
  top: 0px;
  right: 0px;
}
body {
  font-family: Alegreya Sans;
  background: #feeded;
}
.menu {
  position: relative;
  background: #fff;
  width: 3em;
  height: 3em;
  border-radius: 5em;
  margin-left: 35px;
  margin-top: 5em;
  margin-bottom: 5em;
  cursor: pointer;
  width: 40px;
  height: 40px;
  background-color: #fff;
  border-radius: 50%;
  box-shadow: 5px 5px 4px rgba(0, 0, 0, 0.6);
}
.menu:after {
  content: '';
  position: absolute;
  top: 1em;
  left: 1em;
  width: 1em;
  height: 0.2em;
  /* border-top: 0.6em double #fff;
  border-bottom: 0.2em solid #fff; */
}
.menu img {
  margin-left: 8px;
  margin-top: 5px;
  z-index: 1;
}
.menu ul {
  list-style: none;
  padding: 0;
}
.menu li {
  width: 5em;
  height: 1.4em;
  padding: 0.2em;
  margin-top: 0.2em;
  text-align: center;
  border-radius: 0.5em;
  border-bottom-right-radius: 0.5em;
  transition: all 1s;
  background: #ffffff;
  opacity: 0;
  z-index: -1;
}
.menu:hover li {
  opacity: 1;
}
.menu a {
  color: #4995ff;
  text-decoration: none;
}
.menu a:hover {
  color: white;
  text-decoration: none;
}
.menu ul {
  transform: rotate(0deg) translateY(-2em);
  transition: 2s all;
}
.menu:hover ul {
  transform: rotate(180deg) translateY(-1.5em) translateX(1.2em);
}
.menu li:hover {
  background: #4995ff;
  z-index: 10;
}

.menu li:nth-of-type(1) {
  transform: rotate(180deg);
  position: absolute;
  left: -1.3em;
  top: -2em;
  width: 30px;
  height: 30px;
  line-height: 30px;
  border-radius: 50%;
  font-size: 13px;
  font-weight: 700;
}
.menu li:nth-of-type(2) {
  transform: rotate(135deg);
  position: absolute;
  left: 1.6em;
  top: -1.3em;
  width: 30px;
  height: 30px;
  line-height: 30px;
  border-radius: 50%;
  font-size: 13px;
  font-weight: 700;
}
.menu li:nth-of-type(3) {
  transform: rotate(180deg);
  position: absolute;
  left: 2.4em;
  top: 1.6em;
  width: 30px;
  height: 30px;
  line-height: 30px;
  border-radius: 50%;
  font-size: 13px;
  font-weight: 600;
}
.menu li:nth-of-type(4) {
  transform: rotate(225deg);
  position: absolute;
  left: 1em;
  top: 4.1em;
  width: 30px;
  height: 30px;
  line-height: 30px;
  border-radius: 50%;
  font-size: 13px;
  font-weight: 700;
}
.menu li:nth-of-type(5) {
  transform: rotate(270deg);
  position: absolute;
  left: -2.8em;
  top: 5em;
}
.hint {
  text-align: center;
}
</style>
